import React from 'react';
import { Space, Input, Select } from 'antd';

const { Search } = Input;
const { Option } = Select;

interface Category {
  id: number;
  name: string;
}

interface User {
  id: number;
  username: string;
  email: string;
  role: string;
  status: boolean;
}

interface SearchFiltersProps {
  searchKeyword: string;
  selectedCategory: number | null;
  selectedStatus: boolean | null;
  selectedAuthor?: number | null;
  categories: Category[];
  users?: User[];
  onSearch: (value: string) => void;
  onCategoryChange: (value: number | null) => void;
  onStatusChange: (value: boolean | null) => void;
  onAuthorChange?: (value: number | null) => void;
  searchPlaceholder?: string;
  categoryPlaceholder?: string;
  statusPlaceholder?: string;
  authorPlaceholder?: string;
  showCategoryFilter?: boolean;
  showStatusFilter?: boolean;
  showAuthorFilter?: boolean;
  statusOptions?: Array<{ value: boolean; label: string }>;
}

export default function SearchFilters({
  searchKeyword,
  selectedCategory,
  selectedStatus,
  selectedAuthor,
  categories,
  users = [],
  onSearch,
  onCategoryChange,
  onStatusChange,
  onAuthorChange,
  searchPlaceholder = '输入关键词搜索',
  categoryPlaceholder = '选择分类',
  statusPlaceholder = '选择状态',
  authorPlaceholder = '选择创作者',
  showCategoryFilter = true,
  showStatusFilter = true,
  showAuthorFilter = false,
  statusOptions = [
    { value: true, label: '已发布' },
    { value: false, label: '草稿' }
  ]
}: SearchFiltersProps) {
  return (
    <Space>
      <Search
        placeholder={searchPlaceholder}
        onSearch={onSearch}
        enterButton
        style={{ width: 300 }}
        defaultValue={searchKeyword}
      />
      
      {showCategoryFilter && (
        <Select
          placeholder={categoryPlaceholder}
          allowClear
          style={{ width: 150 }}
          onChange={onCategoryChange}
          value={selectedCategory}
        >
          {categories.map(category => (
            <Option key={category.id} value={category.id}>
              {category.name}
            </Option>
          ))}
        </Select>
      )}
      
      {showStatusFilter && (
        <Select
          placeholder={statusPlaceholder}
          allowClear
          style={{ width: 120 }}
          onChange={onStatusChange}
          value={selectedStatus}
        >
          {statusOptions.map(option => (
            <Option key={String(option.value)} value={option.value}>
              {option.label}
            </Option>
          ))}
        </Select>
      )}
      
      {showAuthorFilter && onAuthorChange && (
        <Select
          placeholder={authorPlaceholder}
          allowClear
          showSearch
          filterOption={(input, option) =>
            String(option?.children || '').toLowerCase().includes(input.toLowerCase())
          }
          style={{ width: 150 }}
          onChange={onAuthorChange}
          value={selectedAuthor}
        >
          {users.map(user => (
            <Option key={user.id} value={user.id}>
              {user.username}
            </Option>
          ))}
        </Select>
      )}
    </Space>
  );
} 